<template>
  <div>
    <a-timeline>
      <a-timeline-item v-for="(log, index) in logs" :key="index" :color="getColor(log.changeType)">
        <a-icon v-if="log.type === 'mission'" slot="dot" type="exclamation-circle" :style="{fontSize: '16px'}" />
        <a-icon v-if="log.type === 'instance'" slot="dot" type="thunderbolt" :style="{fontSize: '16px'}" />
        <span class="time">
          {{ log.updatedDate | moment('YYYY-MM-DD') }}
        </span>
        <span>
          {{ log.content }}
        </span>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script>
export default {
  props: {
    logs: {
      type: Array,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {
    getColor (type) {
      switch (type) {
        case 'NEW':
          return 'gray'
        case 'RECRUIT':
          return 'blue'
        case 'IN_PROGRESS':
          return 'blue'
        case 'DONE':
          return 'green'
        case 'ABANDONED':
          return 'gray'
        case 'join':
          return 'green'
        default:
          return 'blue'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.time {
  margin-right: 20px;
  color: #aaa;
  font-style: italic;
}
</style>
